<template>
  <div :style="{ background: `url(${bg})` }" class="box">
    <div class="box-left">
      <LeftMenu></LeftMenu>
    </div>
    <div id="china" class="box-center">
      <Center ></Center>
    </div>
    <div class="box-right">
      <Right></Right>
    </div>
  </div>
</template>
<script setup lang="ts">
import bg from './assets/bg.jpg'
import Center from './components/Center/index.vue'
import LeftMenu from './components/LeftMenu/index.vue'
import Right from './components/Right/index.vue'

</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

.box {
  height: 100%;
  display: flex;
  overflow: hidden;

  &-left {
    width: 400px;
    display: flex;
    flex-direction: column;
  }

  &-center {
    flex: 1;
  }

  &-right {
    width: 400px;
  }
}
</style>